<template>
  <div class="basicInformation">
    <el-form
      :model="form"
      :rules="rules"
      ref="ruleForm"
      label-width="120px"
      class="demo-ruleForm"
    >
      <div class="box">
        <el-form-item label="页面名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入页面名称"></el-input>
        </el-form-item>
        <el-form-item label="页面编码" prop="code">
          <el-input v-model="form.code" placeholder="请输入页面编码"></el-input>
        </el-form-item>
        <el-form-item label="数据源">
          <el-select
            v-model="form.dataSource"
            placeholder="请选择数据源"
            style="width: 100%"
          >
            <el-option label="本地数据源" value="1"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="排序" prop="orderBy">
          <el-input-number
            v-model="form.orderBy"
            :min="1"
            :max="999"
            label="请输入排序"
          ></el-input-number>
        </el-form-item> -->
      </div>
      <el-form-item
        label="自定义SQL"
        prop="querySql"
        style="margin-bottom: 10px; margin-left: 50px"
      >
        <el-input
          type="textarea"
          v-model="form.querySql"
          :rows="5"
          placeholder="请输入SQL"
        ></el-input>
      </el-form-item>
      <div
        style="
          margin-left: 170px;
          display: flex;
          align-items: flex-start;
          margin-bottom: 20px;
        "
      >
        <el-button @click="() => handleChooseTable()" size="small"
          >从实体模型选择表</el-button
        >
        <el-button
          type="primary"
          style="background: #2f54eb"
          size="small"
          @click="() => handleAnalysisSql()"
          >解析SQL</el-button
        >
        <span style="display: flex; width: 400px; align-items: center;margin-left:12px">
          提示：解析到的查询表为
          <el-input
            v-model="form.tableName"
            style="width: 200px; margin-left: 10px"
          ></el-input>
        </span>
      </div>
      <div class="box2">
        <el-form-item label="自定义SQL排序" prop="orderBy">
          <el-radio-group v-model="form.orderBy">
            <el-radio label="desc">倒序</el-radio>
            <el-radio label="asc">正序</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="自定义弹窗标题" prop="customPopupTitle">
          <el-input
            v-model="form.customPopupTitle"
            placeholder="请输入自定义弹窗标题"
          ></el-input>
        </el-form-item>
      </div>
      <div class="box">
        <el-form-item label="表格类型" prop="pageType">
          <el-select
            v-model="form.pageType"
            placeholder="请选择表格类型"
            style="width: 100%"
            @change="(val) => handlePageTypeChange(val, 'pageType')"
          >
            <el-option label="普通列表" value="list"></el-option>
            <el-option label="树形列表" value="tree"></el-option>
            <el-option label="左树右表" value="leftTreeRightTable"></el-option>
            <el-option
              label="左树(系统部门)右表"
              value="leftTreeRightTableDept"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="部门对应字段"
          prop="pageRelationField"
          v-if="form.pageType === 'leftTreeRightTableDept'"
        >
          <el-select
            v-model="form.pageRelationField"
            placeholder="请选择部门对应字段"
            style="width: 100%"
            filterable 
          >
            <el-option
              :label="item.label"
              :value="item.field"
              v-for="item in fieldList"
              :key="item.field"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择框类型" prop="checkBox">
          <el-select
            v-model="form.checkBox"
            placeholder="请选择选择框类型"
            style="width: 100%"
          >
            <el-option
              :label="item.label"
              :value="item.value"
              v-for="item in dict.type.pt_app_page_check_type"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="行号" prop="openRowNum">
          <el-radio-group v-model="form.openRowNum">
            <el-radio label="YES">是</el-radio>
            <el-radio label="NO">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="操作列宽度" prop="operationWidth">
          <el-input-number
            v-model="form.operationWidth"
            :min="1"
            :max="500"
            label="请输入操作列宽度"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="固定操作列" prop="fixedAction">
          <el-radio-group v-model="form.fixedAction">
            <el-radio label="YES">是</el-radio>
            <el-radio label="NO">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- <el-form-item label="固定流程列" prop="name33">
          <el-radio-group v-model="form.name33">
            <el-radio label="1">是</el-radio>
            <el-radio label="2">否</el-radio>
          </el-radio-group>
        </el-form-item> -->
        <el-form-item label="分页" prop="openPage">
          <el-radio-group v-model="form.openPage">
            <el-radio label="YES">是</el-radio>
            <el-radio label="NO">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="分页大小"
          prop="perPage"
          v-if="form.openPage === 'YES'"
        >
          <el-select
            v-model="form.perPage"
            placeholder="请选择分页大小"
            style="width: 100%"
          >
            <el-option
              :label="item.label"
              :value="item.value"
              v-for="item in dict.type.pt_app_page_per_page"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </div>
      <!-- <div class="box">
        <el-form-item label="树形表格" prop="name33">
          <el-radio-group v-model="form.name33">
            <el-radio label="1">是</el-radio>
            <el-radio label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="树节点字段" prop="name">
          <el-input
            v-model="form.name"
            placeholder="请输入树节点字段"
          ></el-input>
        </el-form-item>
        <el-form-item label="树父节点字段" prop="name">
          <el-input
            v-model="form.name"
            placeholder="请输入树父节点字段"
          ></el-input>
        </el-form-item>
      </div> -->
      <div class="box">
        <el-form-item label="是否流程" prop="isProcess">
          <el-radio-group v-model="form.isProcess">
            <el-radio label="YES">是</el-radio>
            <el-radio label="NO">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="流程范围"
          prop="processScope"
          v-if="form.isProcess === 'YES'"
        >
          <el-select
            v-model="form.processScope"
            placeholder="请选择流程范围"
            style="width: 100%"
          >
            <el-option
              :label="item.label"
              :value="item.value"
              v-for="item in dict.type.pt_app_page_process_scope"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="显示审批状态列"
          prop="disableBpmStatus"
          v-if="form.isProcess === 'YES'"
        >
          <el-radio-group v-model="form.disableBpmStatus">
            <el-radio label="YES">是</el-radio>
            <el-radio label="NO">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="显示当前步骤列"
          prop="disableBpmActivity"
          v-if="form.isProcess === 'YES'"
        >
          <el-radio-group v-model="form.disableBpmActivity">
            <el-radio label="YES">是</el-radio>
            <el-radio label="NO">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </div>
      <div class="box2">
        <div class="box2" style="padding-left: 0">
          <el-form-item
            label="树形关联表"
            prop="treeRelationPage"
            v-if="form.pageType === 'leftTreeRightTable'"
          >
            <el-select
              v-model="form.treeRelationPage"
              placeholder="请选择树形关联表"
              style="width: 100%"
              @change="(val) => handlePageTypeChange(val, 'treeRelationPage')"
              filterable 
            >
              <el-option
                :label="item.name"
                :value="item.code"
                v-for="item in treePageList"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="树形显示字段"
            prop="treeDisplayField"
            v-if="form.pageType === 'leftTreeRightTable'"
          >
            <el-select
              v-model="form.treeDisplayField"
              placeholder="请选择树形显示字段"
              style="width: 100%"
              filterable 
            >
              <el-option
                :label="item.label"
                :value="item.field"
                v-for="item in treeFieldList"
                :key="item.field"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
        <el-form-item
          label="树形字段"
          v-if="form.pageType === 'leftTreeRightTable'"
        >
          <div style="display: flex">
            <el-select
              v-model="form.treeRelationField"
              :placeholder="
                form.treeRelationPage
                  ? '请选择树形表字段'
                  : '请先选择树形关联表'
              "
              style="width: 90%"
              :disabled="!form.treeRelationPage"
              filterable 
            >
              <el-option
                :label="item.label"
                :value="item.field"
                v-for="item in treeFieldList"
                :key="item.field"
              ></el-option>
            </el-select>
            <p style="width: 25%; text-align: center; margin: 0">
              对应列表字段
            </p>
            <el-select
              v-model="form.pageRelationField"
              :placeholder="
                form.tableName ? '请选择列表字段' : '请先选择实体模型表'
              "
              style="width: 90%"
              :disabled="!form.tableName"
              filterable 
            >
              <el-option
                :label="item.label"
                :value="item.field"
                v-for="item in fieldList"
                :key="item.field"
              ></el-option>
            </el-select>
          </div>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
import {
  getQuerySql,
  resultFields,
  appPageModelList,
  appPageModelDetail,
} from "@/api/app/pageModel";
import { uuid } from "vue-uuid";
import { getByTableName } from "@/api/app/dataModel/entityModel";
export default {
  name: "basicInformation",
  dicts: [
    "pt_app_page_check_type",
    "pt_app_page_per_page",
    "pt_app_page_process_scope",
  ],
  props: {
    openChooseTable: {
      type: Function,
      default: () => {},
    },
    getChooseTableList: {
      type: Function,
      default: () => {},
    },
    closeMOdel: {
      type: Function,
      default: () => {},
    },
    appId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      activeName: "1",
      treePageList: [],
      treeFieldList: [],
      fieldList: [],
      form: {
        pageType: "list",
        dataSource: "1",
        checkBox: "C",
        openRowNum: "YES",
        operationWidth: 140,
        fixedAction: "NO",
        openPage: "YES",
        orderBy:'desc',
        isProcess: "NO",
        perPage: "10",
        disableBpmStatus: "NO",
        disableBpmActivity: "NO",
        processScope: "my",
        pageType: "list",
      },
      rules: {
        name: [
          { required: true, message: "请输入页面名称", trigger: "blur" },
          {
            pattern: /^[^\s/\\]+$/,
            message: "页面名称不能包含斜线、空格",
            trigger: "blur",
          },
        ],
        code: [
          { required: true, message: "请输入页面编码", trigger: "blur" },
          {
            pattern: /^[^\s\u4e00-\u9fa5/\\]+$/,
            message: "页面编码不能包含汉字、斜线、空格",
            trigger: "blur",
          },
        ],
        dataSource: [
          { required: true, message: "请选择数据源", trigger: "change" },
        ],
      },
    };
  },

  async mounted() {
    if (
      sessionStorage.getItem("pageModel") &&
      JSON.parse(sessionStorage.getItem("pageModel"))?.step1
    ) {
      this.form = JSON.parse(sessionStorage.getItem("pageModel"))?.step1;
    }
    this.$nextTick(async () => {
      if (this.form.pageType === "leftTreeRightTable") {
        const params = {
          pageNum: 1,
          pageSize: 999,
          appId: this.appId,
          type: "tree",
        };
        const res = await appPageModelList(params);
        this.treePageList = res.rows;
        if (this.form.treeRelationPage) {
          const filterRes = this.treePageList?.filter(
            (item) => item.code === this.form.treeRelationPage
          );
          const resFeild = await getByTableName({
            tableName: filterRes?.[0].tableCode,
          });
          this.treeFieldList = resFeild.data?.formFields;
        }
        const resFeild = await getByTableName({
          tableName: this.form.tableName,
        });
        this.fieldList = resFeild.data?.formFields;
      }
      if (this.form.pageType === "leftTreeRightTableDept") {
        const resFeild = await getByTableName({
          tableName: this.form.tableName,
        });
        this.fieldList = resFeild.data?.formFields;
      }
    });
  },

  methods: {
    async handlePageTypeChange(val, type) {
      if (type === "pageType") {
        this.form.treeDisplayField = undefined;
        this.form.treeRelationField = undefined;
        this.form.treeRelationPage = undefined;
        if (val === "leftTreeRightTable") {
          const params = {
            pageNum: 1,
            pageSize: 999,
            appId: this.appId,
            type: "tree",
          };
          const res = await appPageModelList(params);
          this.treePageList = res.rows;
          const resFeild = await getByTableName({
            tableName: this.form.tableName,
          });
          this.fieldList = resFeild.data?.formFields;
        }
        if (val === "leftTreeRightTableDept") {
          const resFeild = await getByTableName({
            tableName: this.form.tableName,
          });
          this.fieldList = resFeild.data?.formFields;
          // this.form.treeRelationField = 'deptName'
          // this.form.treeDisplayField = 'deptName'
        }
      } else if (type === "treeRelationPage") {
        this.form.treeDisplayField = undefined;
        this.form.treeRelationField = undefined;
        const filterRes = this.treePageList?.filter(
          (item) => item.code === val
        );
        const resFeild = await getByTableName({
          tableName: filterRes?.[0].tableCode,
        });
        this.treeFieldList = resFeild.data?.formFields;
      }
    },
    async handleAnalysisSql() {
      if (!this.form.querySql) {
        return this.$message.error("请输入SQL");
      }
      const res = await resultFields({
        appId: this.appId,
        querySql: this.form.querySql,
      });
      if (res.code == 200) {
        const data = {
          ...JSON.parse(sessionStorage.getItem("pageModel")),
        };
        data.step2 = res.data?.resultFields;
        data.step2?.forEach((item) => {
          item.uuid = uuid.v1();
          item.align = "center";
          item.fixed = "none";
          item.opt = "eq";
          item.componentType = "input-text";
          item.quType = "string";
          item.quWidth = 6;
          item.must = "NO";
          item.quHidden = "YES";
          item.sortable = "YES";
        });
        this.form.tableName = res.data?.tableName
        sessionStorage.setItem("pageModel", JSON.stringify(data));
        this.$message.success("解析成功");
      }
    },
    handleChooseTable() {
      this.openChooseTable();
      this.getChooseTableList();
    },
    async getChoostTableData(value) {
      this.form = { ...this.form, tableName: value.tableName };
      const res = await getQuerySql({ tableName: value.tableName });
      if (res.code == 200) {
        this.form = { ...this.form, querySql: res.data };
      }
      this.closeMOdel();
    },
    async handleSubmitBasicInformation() {
      let res = false;
      await this.$refs["ruleForm"].validate((valid) => {
        res = valid;
      });
      return res;
    },
  },
};
</script>

<style lang="scss" scoped>
.basicInformation {
  .box {
    width: 100%;
    display: grid;
    padding-left: 50px;
    // grid-template-rows: 50% 50%;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    // grid-template-rows: auto auto;
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    justify-items: stretch;
    align-items: start;
  }
  .box2 {
    width: 100%;
    display: grid;
    padding-left: 50px;
    // grid-template-rows: 50% 50%;
    grid-template-columns: 1fr 1fr;
    // grid-template-rows: auto auto;
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    justify-items: stretch;
    align-items: start;
  }
}
</style>
